<template>
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-body">
        <div class="stat-label">订单数量</div>
        <div class="stat-number">{{ formatNumber(orderCount) }}</div>
        <div
          class="stat-growth"
          :class="orderCountGrowth >= 0 ? 'growth-up' : 'growth-down'"
        >
          <el-icon size="14">
            <CaretTop v-if="orderCountGrowth >= 0" />
            <CaretBottom v-else />
          </el-icon>
          <span>{{ Math.abs(orderCountGrowth) }}%</span>
        </div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-body">
        <div class="stat-label">订单金额</div>
        <div class="stat-number">¥{{ formatNumber(orderAmount) }}</div>
        <div
          class="stat-growth"
          :class="orderAmountGrowth >= 0 ? 'growth-up' : 'growth-down'"
        >
          <el-icon size="14">
            <CaretTop v-if="orderAmountGrowth >= 0" />
            <CaretBottom v-else />
          </el-icon>
          <span>{{ Math.abs(orderAmountGrowth) }}%</span>
        </div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-body">
        <div class="stat-label">采购金额</div>
        <div class="stat-number">¥{{ formatNumber(purchaseAmount) }}</div>
        <div
          class="stat-growth"
          :class="purchaseAmountGrowth >= 0 ? 'growth-up' : 'growth-down'"
        >
          <el-icon size="14">
            <CaretTop v-if="purchaseAmountGrowth >= 0" />
            <CaretBottom v-else />
          </el-icon>
          <span>{{ Math.abs(purchaseAmountGrowth) }}%</span>
        </div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-body">
        <div class="stat-label">回款金额</div>
        <div class="stat-number">¥{{ formatNumber(paymentAmount) }}</div>
        <div
          class="stat-growth"
          :class="paymentAmountGrowth >= 0 ? 'growth-up' : 'growth-down'"
        >
          <el-icon size="14">
            <CaretTop v-if="paymentAmountGrowth >= 0" />
            <CaretBottom v-else />
          </el-icon>
          <span>{{ Math.abs(paymentAmountGrowth) }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { CaretTop, CaretBottom } from "@element-plus/icons-vue";

// 定义 props 接口
interface StatsDataItem {
  current: number;
  previous: number;
}

interface StatsData {
  orderCount: StatsDataItem;
  orderAmount: StatsDataItem;
  purchaseAmount: StatsDataItem;
  paymentAmount: StatsDataItem;
}

// 定义 props
const props = defineProps<{
  statsData: StatsData;
}>();

// 计算增长比率的辅助函数
const calculateGrowthRate = (current: number, previous: number): number => {
  if (previous === 0) {
    return current > 0 ? 100 : 0; // 上期为0时，如果本期有值则显示100%增长，否则为0
  }
  return Number((((current - previous) / previous) * 100).toFixed(2));
};

// 计算当前值和增长率
const orderCount = computed(() => props.statsData.orderCount.current);
const orderAmount = computed(() => props.statsData.orderAmount.current);
const purchaseAmount = computed(() => props.statsData.purchaseAmount.current);
const paymentAmount = computed(() => props.statsData.paymentAmount.current);

const orderCountGrowth = computed(() =>
  calculateGrowthRate(
    props.statsData.orderCount.current,
    props.statsData.orderCount.previous
  )
);
const orderAmountGrowth = computed(() =>
  calculateGrowthRate(
    props.statsData.orderAmount.current,
    props.statsData.orderAmount.previous
  )
);
const purchaseAmountGrowth = computed(() =>
  calculateGrowthRate(
    props.statsData.purchaseAmount.current,
    props.statsData.purchaseAmount.previous
  )
);
const paymentAmountGrowth = computed(() =>
  calculateGrowthRate(
    props.statsData.paymentAmount.current,
    props.statsData.paymentAmount.previous
  )
);

// 数字格式化函数
const formatNumber = (num: number): string => {
  return num.toLocaleString("zh-CN");
};
</script>

<style scoped>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.stat-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.stat-label {
  font-size: 18px;
  color: #4b5563;
  font-weight: 600;
  letter-spacing: 0.5px;
  order: 1;
}

.stat-number {
  font-size: 42px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.1;
  letter-spacing: -0.5px;
  order: 2;
}

.stat-growth {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  order: 3;
  align-self: center;
}

.stat-growth.growth-up {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
}

.stat-growth.growth-down {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
}

.stat-growth .el-icon {
  margin-right: 6px;
}
</style>
